import QtQuick 2.0
import "./Components"
Item {
    x:200
    y:50
    GreenSquare{
        x:200
        y:50
        width: 200
        height: 100
        BlueSquare{
            width: 80
            height: 80
            anchors.fill: parent //填充父元素
            anchors.margins: 8
            text:'(1)'
        }
    }
    GreenSquare{
        x:600
        y:50
        width: 200
        height: 100
        BlueSquare{
            width: 80
            height: 80
            anchors.left: parent.left //左对齐父元素
            anchors.leftMargin: 8
            text: '(2)'
        }
    }
    GreenSquare{
        x:900
        y:50
        width: 200
        height: 100
        BlueSquare{
            width: 80
            height: 80
            anchors.left: parent.right //左边与父元素的右边对齐
            text: '(3)'
        }
    }
    GreenSquare{
        x:200
        y:250
        width: 200
        height: 100
        BlueSquare{
            id:blue1
            width: 50
            height: 50
            anchors.horizontalCenter: parent.horizontalCenter //与父元素水平中间对齐
        }
        BlueSquare{
            id:blue2
            width: 80
            height: 60
            anchors.top: blue1.bottom //顶部对齐blue1的底部
            anchors.topMargin: 4
            anchors.horizontalCenter: blue1.horizontalCenter //与blue1的中间对齐
            text: '(4)'
        }
    }
    GreenSquare{
        x:200
        y:400
        width: 200
        height: 100
        BlueSquare{
            width: 100
            height: 50
            anchors.centerIn: parent//在父元素中居中
            text: '(5)'
        }
    }
    GreenSquare{
        x:200
        y:600
        width: 200
        height: 100
        BlueSquare{
            width: 100
            height: 50
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: -12
            anchors.verticalCenter: parent.verticalCenter
            text: '(6)'
        }
    }
}
